import React, { Component } from 'react'
import { getDetail, cartAdd } from '../../request/api'
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/topBar.css';
export default class Detail extends Component {

    constructor() {
        super()
        this.state = {
            detail: []
        }
    }


    componentDidMount() {
        let params = {
            id: this.props.match.params.id
        }
        getDetail(params).then(res => {
            if (res.code === 200) {
                this.setState({ detail: res.list[0] })
            }
        })

    }
    addCart(id) {
        let uid = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")).uid : []
        let data = {
            uid,
            type: 1,
            goodsid: id,
            num: 1
        }
        cartAdd(data).then(res => {
            if (res.code === 200) {
                alert("购物车添加成功")
            } else {
                alert(res.msg)
            }
        })
    }
    toBack(){
        this.props.history.push("/index/cate")
    }
    goCart(){
        this.props.history.push("/index/cart")
    }
    render() {
        const { detail } = this.state;
        console.log(detail);
        return (
            <>
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.toBack()}
                >商品详情</NavBar>
                {/* <!-- 新导航栏 --> */}
                <div className="new-nav">
                    <div className="inner">
                        <ul>
                            <li><a href="" className="first">商品</a></li>
                            <li><a href="">评价</a></li>
                            <li><a href="">详情</a></li>
                            <li><a href="">推荐</a></li>
                        </ul>
                    </div>
                </div>

                {/* <!-- 主图 --> */}
                <div className="main-pic">
                    <img src={this.$pregImg + detail.img} alt="" />
                </div>

                {/* <!-- 详情介绍 --> */}
                <div className="detail">
                    <div className="inner">
                        <div className="first">
                            <div className="wrap">
                                <div className="wz1">
                                    <span>&yen;{detail.price}</span>
                                    <span>&yen;{detail.market_price}</span>
                                </div>

                                <div className="icon">
                                    <i className="iconfont icon-shoucang1"></i>
                                    <div>收藏</div>
                                </div>
                                <p className="p1">{detail.goodsname}</p>
                                <p>{detail.description}</p>
                                <div className="f2">11.11限时299元起</div>
                                <div className="f3">
                                    <span className="sp11">此商品于2020-11-11,00点结束闪购特卖，品牌闪购专场</span>
                                    <a href="#">
                                        <span>查看</span>
                                        <i className="iconfont icon-arrowR"></i>
                                    </a>
                                </div>
                            </div>

                        </div>


                        <div className="second">
                            <div className="inner">
                                <div className="s1">
                                    <span>领券</span>
                                    <div className="r-discount">
                                        <div>300</div>
                                        <div>50</div>
                                        <div>10</div>
                                    </div>
                                </div>
                                <div className="s2">
                                    <span className="fq">分期</span>
                                    <div>
                                        <span>
                                            可选3/6/12期
                                        </span>
                                        <i className="iconfont icon-arrowR"></i>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>



                {/* <!-- 固定导航栏 --> */}
                <div className="nav-fix">
                    <div className="inner">
                        <div className="top">
                            <a href="">
                                <img src="../images/icon/shortcut/commodify/hotline.png" alt="" />
                                <span>客服</span>
                            </a>
                            <a href="">
                                <img src="../images/icon/shortcut/commodify/store.png" alt="" />
                                <span>店铺</span>
                            </a>
                            <a>
                                <img src="../images/icon/shortcut/commodify/shoppingcart.png" alt="" onClick={()=>this.goCart()}/>
                                <span>购物车</span>
                            </a>
                            <form action="">
                                <input type="button" value="加入购物车" className="input1" onClick={() => this.addCart(detail.id)} />
                                <input type="button" value="立即购买" className="input2" />
                            </form>
                        </div>

                    </div>

                </div>


            </>
        )
    }
}
